iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0

延續上篇 customize tooltips with data attribute 後,另外也來自己手刻一個麵包屑吧~

可能想說套個 bootstrap 像是這樣子:

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </nav>

不過在 rails 裡面如果每一頁都要有 breadcrumb 還有可能 li 內層的數量不同時,其實滿麻煩的,也會重複的一直寫相同的 link 等等,所以習慣會抽成 partial 來做,並把像是固定的 link,例如:首頁,寫死就不用一直重複的寫。

  # user show page

  <% content_for :breadcrumb do %>
    <%= render "shared/breadcrumb", items: [
      { url: users_path, title: "User show page" },
      { url: nil, title: @users.first.name }
    ] %>
  <% end %>
  # app > views > shared > _breadcrumb.html.erb

  <div class="text-12px flex items-center">
    <li class="inline-block">
      <a href="<%= root_path %>"><span>首頁</span></a>
    </li>
    <% items.each do |item| %>
      <li class="inline-block flex items-center">
        &nbsp;&nbsp;/&nbsp;&nbsp;
        <% if item[:url] %>
          <a href="<%= item[:url] %>"><span><%= item[:title] %></span></a>
        <% else %>
          <span ><%= item[:title] %></span>
        <% end %>
      </li>
    <% end %>
  </div>

這樣子可以更彈性,並且傳入 items 內的數量多寡,就會決定 li 後麵包屑的數量,並且最後一個帶入 url nil 就改為顯示 text,而顯示的內容可能會跟寬度還有些問題,這部分就看 css 怎麼做搭配,文字過長或許就可以透過 whitespace-nowrap overflow-hiddenflex-shrink-0 等等方式來處理。

參考來源

My blog


上一篇
冒險村15 - customize tooltips with data attribute
下一篇
冒險村17 - Configatron
系列文
冒險村-30 Day Ruby on Rails Tips Challenge30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言